<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form ref="form"   :rules="rules" :model="form" label-width="260px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="医院名称" prop="name">
            <el-input v-model="form.name" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医院简介" prop="description">
            <el-input v-model="form.description" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="省市区" prop="provinceId">
            <el-cascader v-model="selectedOptions" :options="options" @change="pcaList" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="form.address" />
            <el-button type="text" @click="getLngLat">获取经纬度</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否上架" prop="status">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option
                v-for="item in statusOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否置顶" prop="isTop">
            <el-select v-model="form.isTop" placeholder="请选择">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属分公司" prop="officeId">
            <!-- <el-input v-model="form.officeId"></el-input> -->
            <el-select v-model="form.officeId" placeholder="请选择" v-if="officeOption.length">
              <el-option
                v-for="item in officeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经度" prop="lng">
            <el-input v-model="form.lng" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="form.lat" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医院标签" prop="labelsId">
            <!-- <el-input v-model="form.tagsId"></el-input> -->
            <el-select v-model="form.labelsId" v-if="tagOption.length" placeholder="请选择">
              <el-option
                v-for="item in tagOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医院类型" prop="tagsId">
            <!-- <el-input v-model="form.tagsId"></el-input> -->
            <el-select v-model="form.tagsId" v-if="tagOption.length" placeholder="请选择">
              <el-option
                v-for="item in tagOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="贷款平台">
           
            <el-select v-model="form.loanId" v-if="loanOption.length" placeholder="请选择">
              <el-option
                v-for="item in loanOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="每日可预约次数" prop="appointmentNum">
            <el-input v-model="form.appointmentNum" @blur="numBlur"  />
            <p style="color:red;" v-if="form.appointmentNum=='0'">0为不限次数</p>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="是否支持90天不满意退款">
            <el-radio v-model="form.isNoReason" :label="0">否</el-radio>
            <el-radio v-model="form.isNoReason" :label="1">是</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 图片信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">图片信息</h5>
      <el-row>
        <el-col :span="24">
          <el-form-item label="LOGO" prop="logo">
            <newUpload
              ref="uploadImg1"
              :fileNum="fileNum1"
              :width="imgWeith1"
              :height="imgHeight1"
            />
            <p>图片尺寸800px*800px</p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医院图片" prop="imageList">
            <newUpload
              ref="uploadImg2"
              :fileNum="fileNum2"
              :width="imgWeith2"
              :height="imgHeight2"
            />
            <p>最多添加12张图片，图片尺寸800px*600px</p>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="90天无理由退款">
            <newUpload ref="uploadImg3" :fileNum="fileNum3" :width="800" :height="600" />
            <p>最多添加3张图片，图片尺寸800px*600px</p>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="医院环境">
            <newUpload ref="uploadImg4" :fileNum="fileNum4" :width="800" :height="600" />
            <p>最多添加3张图片，图片尺寸800px*600px</p>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="医院描述">
            <Tinymce v-if="flag" v-model="form.content" style="width:96%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="margin:30px 0" type="primary" @click="submitFn('form')">立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/index";
import Tinymce from "@/components/Tinymce";
import { hospitalAdd, getGPS, TagsList } from "@/api/hospitalAdd";
import { companyList } from "@/api/branchOfficeDropDown";
import { loanDropDown } from "@/api/loanDropDown";
import { findHospitalTagsList } from "@/api/hospitalLabel";

export default {
  name: "HospitalAdd",
  components: { newUpload, Tinymce },
  data() {
    return {
      imgWeith1: 800,
      imgHeight1: 800,
      imgWeith2: 800,
      imgHeight2: 600,
      flag: true,
      imgUploadFlag100: true,
      imgUploadFlag: true,
      fileNum1: 1,
      fileNum2: 12,
      fileNum3: 3,
      fileNum4: 3,
      officeOption: [],
      userId: "",
      statusOption: [
        {
          value: "0",
          label: "是"
        },
        {
          value: "1",
          label: "否"
        }
      ],
      form: {
        isNoReason:0,
        name: "",
        tagsId: "",
        description: "",
        provinceId: "",
        cityId: "",
        address: "",
        lng: "",
        lat: "",
        status: "",
        loanId: "",
        officeId: "",
        appointmentNum: "",
        logo: "",
        star: "1",
        imageList: [],
        content: ""
      },
      rules: {
        name: [{ required: true, message: "请输入医院名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入医院简介", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择是否上架", trigger: "blur" }
        ],
        lng: [{ required: true, message: "请输入经度", trigger: "blur" }],
        lat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        officeId: [
          { required: true, message: "请选择所属分公司", trigger: "blur" }
        ],
        provinceId: [
          { required: true, message: "请输入省市区", trigger: "blur" }
        ],
        tagsId: [
          { required: true, message: "请选择医院标签", trigger: "blur" }
        ],
        appointmentNum: [
          { required: true, message: "请输入每日预约次数", trigger: "blur" }
        ],
        logo: [{ required: true, message: "请上传医院logo", trigger: "blur" }],
        imageList: [
          { required: true, message: "请上传医院图片", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入医院描述", trigger: "blur" }
        ]
      },
      options: [],
      loanOption: [],
      selectedOptions: [],
      list1: {},
      submitForm: {},
      tagOption: []
    };
  },
  created() {
    if (this.$route.query.hospitalname) {
      this.form.name = this.$route.query.hospitalname;
    }
  },
  inject: ["reload"],
  mounted() {
    this.imgWeith2 = 750;
    this.imgHeight2 = 422;
    this.userId = this.$route.query.userId;
    // 省市区数据获取
    var addData = require("../../../../static/address/area.json");
    this.options = addData;
    // 分公司列表
    this.getCompanyList();
  },
  methods: {
    // 获取经纬度
    getLngLat() {
      this.options.forEach(item => {
        if (this.selectedOptions.length > 0) {
          if (this.selectedOptions[0] == item.value) {
            this.selectedOptions[0] = item.label;
          }
          item.children.forEach(list => {
            if (this.selectedOptions[1] == list.value) {
              this.selectedOptions[1] = list.label;
              list.children.forEach(child => {
                if (this.selectedOptions[2] == child.value) {
                  this.selectedOptions[2] = child.label;
                }
              });
            }
          });
        }
      });
      let addDatas;
      if (this.selectedOptions.length > 0) {
        addDatas = this.selectedOptions.join("");
      } else {
        this.$message({
          message: "请选择省市区",
          type: "warning"
        });
        return;
      }
      const datas = {
        id: addDatas + this.form.address
      };
      getGPS(datas).then(res => {
        if (!res.data.code) {
          this.form.lng = res.data.data.lng;
          this.form.lat = res.data.data.lat;
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    // 获取分公司列表
    getCompanyList() {
      companyList()
        .then(res => {
          const resData = res.data.data;
          const newData = [];
          resData.forEach(e => {
            newData.push({
              value: e.id,
              label: e.name
            });
          });
          this.officeOption = newData;
        })
        .catch(error => {
          this.$message.error(error);
        });
      loanDropDown().then(res => {
        const resData = res.data.data;
        const newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id,
            label: e.name
          });
        });
        this.loanOption = newData;
      });
      // 获取医院标签
      const datas = {
        pageNum: 1,
        pageSize: 999
      };
      TagsList(datas).then(res => {
        const resData = res.data.data.list;
        const newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id,
            label: e.name
          });
        });
        this.tagOption = newData;
      });
    },
    // 省市区数据改变
    pcaList(value) {
      let e = this.selectedOptions;
      e = value;
      this.form.provinceId = String(e[0]);
      this.form.cityId = String(e[1]);
      this.form.area = e[2];
      this.form.districtId = e[2];
    },
    // 可预约次数校验
    numBlur() {
      const reg = /^[+]{0,1}(\d+)$/;
      var re = new RegExp(reg);
     
      if (!re.test(this.form.appointmentNum)) {
        this.form.appointmentNum = null;
      }
     
    },
    // 修改提交
    submitFn(e) {
        if(this.form.appointmentNum-0>999){
         this.$message({
                  showClose: true,
                  message: '每日可预约次数不可超过999',
                  type: "warning"
                });
                return
       }
      this.form.logo = this.$refs.uploadImg1.submitUpload()[0];
      this.form.imageList = this.$refs.uploadImg2.submitUpload();
      this.form.supportRefundList = this.$refs.uploadImg3.submitUpload();
      this.form.environmentList = this.$refs.uploadImg4.submitUpload();
      if (!this.$route.query.id) {
        this.form.hospitalInformationId = null;
      } else {
        this.form.hospitalInformationId = this.$route.query.id - 0;
      }

      this.$refs[e].validate(valid => {
        if (valid) {
          // this定义
          const tf = this.form;

          const datas = { ...this.form };
          datas.tagsId = datas.tagsId.toString();
          datas.loanId = datas.loanId.toString();
          datas.officeId = String(datas.officeId);
          datas.appointmentNum = datas.appointmentNum - 0;
          hospitalAdd(datas)
            .then(res => {
              console.log(res);
              if (res.data.code == 0) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success"
                });
                // this.$router.push("/hospitalIndex");
                this.$router.go(-1);
                this.reload();
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              this.$message.error(error);
            });
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
</style>
